<template>
    <el-row :gutter="20">
            <el-col :span="12">
                <el-select v-model="id" clearable :loading="loading" @visible-change="onGetData" @change="onRoleSelect">
                    <el-option label="请选择" :value="0" />
                    <el-option v-for="item in data" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-col>
            <el-col :span="12" class="text-right"><el-button size="small" type="primary" @click="onEdit(0)">添加新岗位</el-button></el-col>
        </el-row>
    <el-dialog v-model="isAuthForm" title="权限管理" width="60%">
        <component :is="authForm" :data = editId :type="1" @onSave="onSave" />
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref,onMounted, watch } from 'vue'
import http from '../util/request';
import authForm from '@/components/authForm.vue';
interface Project {
    id: number
    name: string
}
const isAuthForm = ref<boolean>(false)
const data = ref<Project[]>([])
const loading = ref<boolean>(false)
const id = ref(0)
const editId = ref(0)
const props = defineProps<{
    data:number
}>()

watch(props,()=>{
    id.value = props.data
},{ immediate: true })

const onGetData = () => {
    loading.value = true
    http.post('role/all',{}).then((response:any)=>{
        loading.value = false
        data.value = response.data.data
        onRoleSelect(id.value)
    })
}


const onEdit = (data: number) => {
    editId.value = data
    isAuthForm.value = true
}

const onSave = () => {
    isAuthForm.value = false
    onGetData()
}

const onRoleSelect = (role_id:number) => {
    emit('onRoleSelect',role_id)
}

const emit = defineEmits(['onRoleSelect'])

onMounted(()=>{
    onGetData()
})

</script>

<style scoped>

</style>